<template>
  <div class="pop-box" :style="wrapperCss" :class="[faceClass]" v-show="visible">
    <el-dialog :modal="false" :visible="dialogVisible" :close-on-click-modal="false"
      :close-on-press-escape="false" custom-class="box-wrap" top="0px" :before-close="handleClose">
      <div class="header" :style="headerCss">
        <div class="box-title">
          <span><slot name="title"></slot></span>
        </div>
      </div>
      <div class="body" :style="bodyStyle">
        <slot></slot>
        <div class="box-footer" v-if="$slots.footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "popBox",
  props:{
    visible: {
      type: Boolean,
      default: false
    },
    deepShow: {
      type: Boolean,
      default: true
    },
    face: {
      type: [String,Number],
      default: function (val) {
        return parseInt(val);
      }
    },
    wrapperStyle: {
      type: Object
    },
    headerStyle: {
      type: Object
    },
    bodyStyle:{
      type: Object
    }
  },
  data() {
    return {
      wrapperCss:null,
      headerCss:null,
    }
  },
  computed:{
    // 双向绑定解耦
    dialogVisible:function (){
      if(this.deepShow){
        return  true;
      }else {
        return this.visible
      }
    },
    //样式
    faceClass:function (){
      return this.face ? `pop-box--${ this.face }`:'';
    },
  },
  watch:{},
  created() {
    this.initStyle(this.face);
  },
  mounted() {
    // 渲染完毕
    this.$emit('done');
  },
  methods:{
    // 根据face重新初始化
    initStyle(face){
      // 默认值
      switch (face) {
        case 1:
        this.wrapperCss = {
            width:"19.2rem",
          },
          this.headerCss = {
            height:"32px"
          };
          break;
        default:
          return {}
      }
      this.wrapperCss = {...this.wrapperCss,...this.wrapperStyle};
      this.headerCss = {...this.headerCss,...this.headerStyle};
      if(this.headerStyle && this.headerStyle.width){
        this.wrapperCss.width = this.headerStyle.width;
      }
    },
    handleClose(done){
      // console.log("done");
      this.$emit('update:visible', false);
      this.$emit('handleClose');
      done();
    }
  }
}
</script>
<style lang="scss" scoped>
.pop-box {
  position: absolute;
  top: 9vh;
  right: 11.65rem;
  ::v-deep .el-dialog__wrapper {
    height: 100%;
    position: relative;
  }

  ::v-deep .box-wrap {
    width: 21rem;
    height: 32.7rem;
    margin-right: 5px;
    background: url("~@/assets/images/advance_bg.png") no-repeat;
    background-size: 100% 100%;
    padding: 1.5rem 1rem 0 1rem;
    box-sizing: border-box;
  }

  ::v-deep .el-dialog__header {
    height: 0;
    padding: 0;
    .box-title{
      cursor: pointer;
      font-size: .8rem;
      font-weight: 700;
      color: #fff;
      background: -webkit-gradient(linear,left bottom,left top,color-stop(.41504%,#1dbaff),to(#b4eeff));
      background: linear-gradient(0deg,#1dbaff .41504%,#b4eeff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  ::v-deep .el-dialog__body{
    height: 100%;
    padding: 0px 5px;
  }

  .box-title{
    margin-left: 10px;
    font-size: .9rem;
    font-weight: 700;
    height: 100%;
    display: flex;
    cursor: pointer;
    /*实现垂直居中*/
    align-items: center;
    color: #fff;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(.41504%,#1dbaff),to(#b4eeff));
    background: linear-gradient(0deg,#1dbaff .41504%,#b4eeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    span{
      margin: 6px 10px 10px;
    }
  }

  ::v-deep .el-dialog__headerbtn {
    padding: 2px;
    top: 7px;
    right: -4px;
    background-color: #00D2FF;
    border-radius: 50%;
    .el-dialog__close {
      color: #000000;
    }
  }
  .box-footer {
    width: 96%;
    height: 3.95rem;
    position: absolute;
    left: 1%;
    bottom: 0;
    display: flex;
    justify-content: center;
    background: url('~@/assets/images/resource_btn_submit_box.png') no-repeat;
    background-size: 100% 100%;
  }
}
.pop-box--1{
  ::v-deep .box-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background:transparent;
    box-sizing: border-box;
  }
  ::v-deep .box-wrap:not(.is-fullscreen) {
    margin-top: 0vh !important;
  }
  ::v-deep .el-dialog__body{
    height: 100%;
    padding: 0;
  }
  ::v-deep .header{
    width: 100%;
    cursor: pointer;
    background: url('~@/assets/images/live_home_bg_top.png') no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
  }
  ::v-deep .body{
    background: url('~@/assets/images/live_home_bg.png')  bottom center no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: auto;
    padding: 0.3rem 0.8rem;
  }
  .box-title{
    margin-left: 10px;
    font-size: .9rem;
    font-weight: 700;
    height: 100%;
    display: flex;
    /*实现垂直居中*/
    align-items: center;
    color: #fff;
    background: -webkit-gradient(linear,left bottom,left top,color-stop(.41504%,#1dbaff),to(#b4eeff));
    background: linear-gradient(0deg,#1dbaff .41504%,#b4eeff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
      span{
        margin: 6px 10px 10px;
      }
  }
  ::v-deep .el-dialog__headerbtn {
    background: transparent;
    .el-dialog__close{
      cursor: pointer;
      width: 3.65rem;
      height: 1.65rem;
      position: absolute;
      top: -6px;
      right: 10px;
    }
    .el-dialog__close:before {
      content: '';
    }
  }
  .box-footer{
    height: 0;
    overflow: hidden;
    display: none;
  }
}
</style>
